$imgCount : 8;
html, body {
  background: #000;
}

.container{
  position:relative;
}

.stage{
  position:relative;
  width: 800px;
  height: 240px;
  margin: 20px auto;
  perspective:2000px;
  transform-style: preserve-3d;
  -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .5));

  .control{
    position:relative;
    width:100%;
    height:100%;
    transform-style: preserve-3d;
    transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
    animation:rotate 30s linear infinite;

    .imgWrap{
      position:absolute;
      width:400px;
      height:400px;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      transform-style: preserve-3d;

      .img{
        position:absolute;
        width:500px;
        height:400px;
        line-height:400px;
        text-align:center;
        font-size:120px;
        top:0;
        left:0;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      @for $i from 1 through $imgCount{
        .img#{$i}{
          // transform: rotateY(35 + ($i * 45deg)) translateZ(482.84px) ;
          transform: rotateY(35 + ($i * 45deg)) translateZ(650px) ;
        }
      }
    }
  }
}

@keyframes rotate{
  0%{
    transform: translateZ(-2000px) rotateY(0deg);
  }
  50%{
    transform: translateZ(-2000px) rotateY(-360deg);
  }
  100%{
    transform: translateZ(-2000px) rotateY(-720deg);
  }
}
